import React, { useEffect, useState } from 'react'
import { Table, Tag, Button, Modal, Popover, Switch } from 'antd'
import { EditOutlined, CloseCircleOutlined } from '@ant-design/icons';
import axios from 'axios'
const { confirm, cancle } = Modal


export default function RightList() {
  const [dataSource, setdataSource] = useState([])

  useEffect(() => {
    axios.get('http://localhost:5000/jurisdiction').then(res => {
      setdataSource(res.data)
    })
  }, [])
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
      render: (id) => {
        return <b>{id}</b>
      }
    },
    {
      title: '权限名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      render: (name) => {
        return <b>{name}</b>
      }
    },
    {
      title: '权限路径',
      dataIndex: 'path',
      key: 'path',
      align: 'center',
      render(path) {
        return <Tag color="orange">{path}</Tag>
      },
    },
    {
      title: '操作',
      align: "center",
      render(item) {
        return <div>
          <Popover content={<div style={{ textAlign: 'center' }}>
            <Switch onChange={() => switchChange(item)}></Switch>
          </div>} title="页面配置项">
            <Button style={{ marginRight: "10px" }} type="primary" shape="circle" icon={<EditOutlined />} />
          </Popover>
          <Button type="primary" danger shape="circle" icon={<CloseCircleOutlined />} onClick={() => confirmMethod(item)} />
        </div>
      },
    },
  ];

  const switchChange = (item) => {
    console.log(item);
  }

  const confirmMethod = (item) => {
    confirm({
      title: '提示',
      content: '您确定删除吗?',
      onOk() {
        deleteMethod(item)
      },
      onCancel() {
        console.log('取消');
      }
    })
  }

  const deleteMethod = (item) => {
    setdataSource(dataSource.filter(data => data.id !== item.id))
    // axios.delete(`http://localhost:5000/jurisdiction/${item.id}`.then(Res=>{
    //   console.log('删除成功');
    // }))
  }

  return (
    <div>
      <Table dataSource={dataSource} columns={columns} pagination={{
        pageSize: 5
      }} />
    </div>
  )
}
